{% load static %}
<!DOCTYPE html>
<html>

<head>
	<meta charset="utf-8">
	<title></title>
	<link href="{% static 'component/layui/css/layui.css' %}" rel="stylesheet" />
	<link href="{% static 'admin/css/pearCommon.css' %}" rel="stylesheet" />
</head>

<body>

	<body class="pear-container">
		<div class="layui-card">
			<div class="layui-card-body">
				<form class="layui-form" action="">
					<div class="layui-form-item">
						<div class="layui-input-inline">
							<input type="text" name="search" placeholder="物料.." class="layui-input">
						</div>
						<div class="layui-input-inline">
							<select name="record_type" lay-verify="required" lay-filter="role">
                                <option value="0">全部</option>
                                <option value="1">入库</option>
                                <option value="2">出库</option>
                            </select>
						</div>
						<button class="pear-btn pear-btn-md pear-btn-primary" lay-submit lay-filter="user-query">
							<i class="layui-icon layui-icon-search"></i>
							查询
						</button>
						<button type="reset" class="pear-btn pear-btn-md">
							<i class="layui-icon layui-icon-refresh"></i>
							重置
						</button>
					</div>
				</form>
			</div>
		</div>
		<div class="layui-card">
			<div class="layui-card-body">
				<table id="user-table" lay-filter="user-table"></table>
			</div>
		</div>
	</body>

	<script type="text/html" id="user-toolbar">
		<button class="pear-btn pear-btn-primary pear-btn-md" lay-event="add-in">
			<i class="layui-icon layui-icon-add-1"></i>
			新增入库
		</button>
		<button class="pear-btn pear-btn-danger pear-btn-md" lay-event="add-out">
			<i class="layui-icon layui-icon-subtraction"></i>
			新增出库
		</button>
	</script>

	<script type="text/html" id="record-img">
		{% verbatim %}
		<img src="{{ d.img_url }}" alt="" lay-event="show_img" style="cursor:pointer">
		{% endverbatim %}
	</script>

	<script type="text/html" id="user-bar">
		<button class="pear-btn pear-btn-success pear-btn-sm" lay-event="ok" title="确认"><i class="layui-icon layui-icon-ok"></i></button>
		<button class="pear-btn pear-btn-warming pear-btn-sm" lay-event="close" title="取消"><i class="layui-icon layui-icon-close"></i></button>
		<button class="pear-btn pear-btn-primary pear-btn-sm" lay-event="edit" title="修改"><i class="layui-icon layui-icon-edit"></i></button>
		<button class="pear-btn pear-btn-danger pear-btn-sm" lay-event="remove" title="删除"><i class="layui-icon layui-icon-delete"></i></button>
	</script>

	<script src="{% static 'component/layui/layui.js' %}"></script>
	<script src="{% static 'component/my.js' %}"></script>
	<style type="text/css">
		.layui-table img{
			max-width: 100px
		}
	</style>
	<script>
		layui.use(['table', 'form', 'jquery'], function () {
			let table = layui.table;
			let form = layui.form;
			let $ = layui.jquery;

			let cols = [
				[
					{ title: '序号', field: 'No', align: 'center', width: 80 },
					// { title: '单号', field: 'order_no', align: 'center' },
					{ title: '类型', field: 'order_type', align: 'center', width: 80,  templet: function(d){
						if(d.order_type == 1){
							return '<button class="pear-btn pear-btn-primary pear-btn-sm"> 入库</button>'
						}else if(d.order_type == 2){
							return '<button class="pear-btn pear-btn-danger pear-btn-sm"> 出库</button>'
						}else{
							return '<button class="pear-btn pear-btn-sm"> 未知</button>'
						}
					} },
					{ title: '物料名称', field: 'supply_name', align: 'center' },
					{ title: '数量', field: 'number', align: 'center', width: 80 },
					{ title: '当前剩余数量', field: 'cur_number', align: 'center' },
					{ title: '出入库前数量', field: 'last_number', align: 'center' },
					{ title: '图片', field: 'img_url', align: 'center', templet: "#record-img" },
					{ title: '状态', field: 'status', align: 'center', templet: function(d){
						if(d.status == 1){
							return '<button class="layui-btn layui-btn-normal layui-btn-sm layui-btn-radius"> 已确认</button>'
						}else if(d.status == 2){
							return '<button class="layui-btn layui-btn-primary layui-btn-sm layui-btn-radius"> 已取消</button>'
						}else{
							return '<button class="layui-btn layui-btn-warm layui-btn-sm layui-btn-radius"> 待确认</button>'
						}
					} },
					{ title: '备注', field: 'remark', align: 'center' },
					{ title: '确认人', field: 'confirm_user', align: 'center' },
					{ title: '确认时间', field: 'confirm_time', align: 'center' },
					{ title: '操作人', field: 'operator', align: 'center' },
					{ title: '创建时间', field: 'create_time', align: 'center' },
					{ title: '操作', toolbar: '#user-bar', align: 'center', width: 180 }
				]
			]

			table.render({
				elem: '#user-table',
				url: "{% url 'supply:record_list' %}",
				page: true,
				cols: cols,
				skin: 'line',
				limit: 10,
				limits: [10, 20, 30],
				toolbar: '#user-toolbar',
				defaultToolbar: [{
					title: '刷新',
					layEvent: 'refresh',
					icon: 'layui-icon-refresh',
				}, 'filter', 'print', 'exports'],
				parseData: function (res) { 	//res 即为原始返回的数据
					console.log(res)
					return {
						"code": res.status, 	//解析接口状态
						"msg": res.msg, 		//解析提示文本
						"count": res.data_count, 	//解析数据长度
						"data": res.data 		//解析数据列表
					};
				},
			});

			table.on('tool(user-table)', function (obj) {
				if (obj.event === 'ok') {
					window.ok(obj);
				} else if (obj.event === 'close') {
					window.close(obj);
				} else if (obj.event === 'edit') {
					window.edit(obj);
				} else if (obj.event === 'remove') {
					window.remove(obj);
				} else if (obj.event === 'show_img') {
					window.show_img(obj);
				}
			});

			table.on('toolbar(user-table)', function (obj) {
				if (obj.event === 'add-in') {
					window.add_in();
				}else if (obj.event === 'add-out') {
					window.add_out();
				} else if (obj.event === 'refresh') {
					window.refresh();
				}
			});

			form.on('submit(user-query)', function (data) {
				table.reload('user-table', { where: data.field })
				return false;
			});

			window.add_in = function () {
				let url = "{% url 'supply:record_add' 'order_type' %}"
				url = url.replace("order_type", 1)
				layer.open({
					type: 2,
					title: '新增入库单',
					shade: 0.1,
					area: ['600px', '500px'],
					content: url,
					shadeClose: true,
				});
			}
			window.add_out = function () {
				let url = "{% url 'supply:record_add' 'order_type' %}"
				url = url.replace("order_type", 2)
				layer.open({
					type: 2,
					title: '新增出库单',
					shade: 0.1,
					area: ['600px', '500px'],
					content: url,
					shadeClose: true,
				});
			}

			window.edit = function (obj) {
				let url = "{% url 'supply:record_edit' 'rc_id' %}"
				url = url.replace("rc_id", obj.data['id'])
				layer.open({
					type: 2,
					title: '修改',
					shade: 0.1,
					area: ['600px', '500px'],
					content: url,
					shadeClose: true,
				});
			}

			// 确认出入库单
			window.ok = function (obj) {
				layer.confirm('是否确认该出入库单？', { icon: 3, title: '提示' }, function (index) {
					layer.close(index);
					let data = {"record_id": obj.data["id"], "record_status": 1}
					record_verify(data)
				});
			}
			// 取消出入库单
			window.close = function (obj) {
				layer.confirm('是否取消该出入库单？', { icon: 3, title: '提示' }, function (index) {
					layer.close(index);
					let data = {"record_id": obj.data["id"], "record_status": 2}
					record_verify(data)
				});
			}
			function record_verify(data){
				let loading = layer.load();
				$.ajax({
						url: "{% url 'supply:record_verify' %}",
						data: JSON.stringify(data),
						dataType: 'json',
						contentType: 'application/json',
						type: 'post',
						headers: {
							"X-CSRFToken": getCookie("csrftoken")
						},
						success: function (result) {
							layer.close(loading);
							if (result.status == 1) {
								layer.msg(result.msg, { icon: 1, time: 1000 }, function () {
									table.reload("user-table");
								});
							} else {
								layer.msg(result.msg, { icon: 2, time: 1000 });
							}
						}
					})
			}
			// 删除出入库单
			window.remove = function (obj) {
				layer.confirm('确定要删除该出入库单？', { icon: 3, title: '提示' }, function (index) {
					layer.close(index);
					let loading = layer.load();
					let url = "{% url 'supply:record_del' 'rc_id' %}"
					url = url.replace("rc_id", obj.data["id"])
					$.ajax({
						url: url,
						dataType: 'json',
						type: 'delete',
						headers: {
							"X-CSRFToken": getCookie("csrftoken")
						},
						success: function (result) {
							layer.close(loading);
							if (result.status == 1) {
								layer.msg(result.msg, { icon: 1, time: 1000 }, function () {
									// obj.del();
									parent.layui.table.reload("user-table");
								});
							} else {
								layer.msg(result.msg, { icon: 2, time: 1000 });
							}
						}
					})
				});
			}

			window.refresh = function (param) {
				table.reload('user-table');
			}

			// 点击图片放大
			window.show_img = function(obj){
				console.log(obj)
				layer.open({
					type: 1,
					title: false,
					shade: 0.1,
					shadeClose: true,
					area: ['750px', '650px'], 	//宽高
        			content: "<img src=" + obj.data['img_url'] + " style='display: inline-block; width: 100%; height: 100%;' />"
				});
			}
		})
	</script>
</body>

</html>